<template>
    <div>
        <h3>评论列表</h3>
        <div class="charView">
            <div v-for="(item, index) in list" :key="index">
                <table border="0" cellpadding="0" cellspacing="0" align="left"
                    style="background-color: rgb(250, 249, 248);width:90%;margin:5px;" @click="getnickname(item)">
                    <tr>
                        <td rowspan="2" width="55px">
                            <div
                                style="width: 55px;height:55px;border:1px solid black;border-radius:50%;text-align:center;line-height: 55px;">
                                头像
                            </div>
                        </td>
                        <td><b>{{ item.nickname }}</b>&nbsp;<span style="font-size: 13px;">{{ formatDate(item.createDate) }}</span></td>
                    </tr>
                    <tr>
                        <td>
                            <span style="font-size: 14px;">
                                {{ item.message }}
                            </span>
                        </td>
                    </tr>
                </table>
                <traverseMessage :tree="item.children" v-if="item.children" v-on:userMessage="userMessage">
                </traverseMessage>
            </div>
        </div>


        <div>
            <el-form :model="comment" :inline="true" :rules="rules" ref="comment" class="demo-form-inline">
                <el-form-item label="昵称：" prop="nickname">
                    <el-input v-model="comment.nickname" clearable placeholder="请输入昵称" size="small"></el-input>
                </el-form-item>

                <el-form-item label="邮箱：">
                    <el-input v-model="comment.mail" clearable placeholder="请输入邮箱" size="small"></el-input>
                </el-form-item>
                <el-row>
                    <el-form-item label="评论：" prop="message">
                        <el-input v-model="comment.message"
                            :placeholder="comment.reply_name == '' ? '' : '回复：' + comment.reply_name" size="small" clearable
                            style="width: 370px;"></el-input>
                        &nbsp;
                        <el-button type="primary" size="small" @click="submitForm('comment')">
                            <span v-if="comment.reply_name == ''">发布评论</span>
                            <span v-else>回复评论</span>
                        </el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script>
import { limit, issue } from "@/js/api/comment/comment"
import traverseMessage from "@/components/comment/traverseMessage"
export default {
    name: "commentList",
    components: {
        traverseMessage
    },
    data() {
        return {
            list: [],
            queryCondition: {
                pageSize: 1,//查询第几页
                pageNum: 10000,//一页显示多少行
            },
            comment: {
                parentId: "",
                nickname: "",
                message: "",
                mail:"",
                reply_name: ""
            },
            commentId: "",
            rules: {
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                message: [
                    { required: true, message: '评论不能为空', trigger: 'blur' },
                ]
            }
        }
    },
    created() {
        this.loadCommentList()
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {
                        nickname: this.comment.nickname,
                        parentId: this.comment.parentId,
                        message: this.comment.message
                    }

                    issue(data).then(() => {
                        this.loadCommentList()
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },

        userMessage(data) {
            if (this.commentId == data.id) {
                this.comment.reply_name = ""
                this.comment.parentId = ""
                this.commentId = ""
                this.mail = ""
            } else {
                this.comment.reply_name = data.nickname
                this.comment.parentId = data.id
                this.commentId = data.id
                this.mail = data.mail
            }

        },
        getnickname(item) {
            if (this.commentId == item.id) {
                this.comment.reply_name = ""
                this.comment.parentId = ""
                this.commentId = ""
                this.mail = ""
            } else {
                this.comment.reply_name = item.nickname
                this.comment.parentId = item.id
                this.commentId = item.id
                this.mail = item.mail
            }

        },
        loadCommentList() {
            let params = {
                pageSize: this.queryCondition.pageSize,//查询第几页
                pageNum: this.queryCondition.pageNum,//一页显示多少行
            }
            limit(params).then(res => {
                this.list = res.data.data.list
            })
        }
    }
}
</script>
<style>
.charView {
    width: 100%;
    height: 500px;
    overflow-y: auto;

}
</style>